<template>
  <ElPopover placement="right" :width="400" trigger="click">
    <template #reference>
      <li class="input-item"><span>搜索</span></li>
    </template>
    <ElTabs type="border-card" v-model="activeName" class="demo-tabs">
      <ElTabPane label="设施名称搜索" name="0" class="h-[200px]">
        <ElInput @input="ChangePipePoint" v-model="input" placeholder="设施名称搜索" />
        <ul>
          <li
            @click="ChoosePipeLine(item.lon, item.lat, item.facName, 0, item)"
            v-for="item in SearchPipePoint"
            :key="item.facName"
            >{{ item.facName }}</li
          >
        </ul>
      </ElTabPane>
      <ElTabPane label="管线名称搜索" name="1" class="h-[200px]">
        <ElInput @input="ChangePipeLine" v-model="input" placeholder="管线名称搜索" />
        <ul>
          <li
            @click="ChoosePipeLine(item.startLon, item.startLat, item.pipeLineName, 1, item)"
            v-for="item in SearchPipeLine"
            :key="item.pipeLineName"
            >{{ item.pipeLineName }}</li
          >
        </ul>
      </ElTabPane>
    </ElTabs>
  </ElPopover>
</template>
<script lang="tsx" setup>
import { useGISStore } from '@/store/modules/gis'
import { ElTabs, ElInput, ElPopover } from 'element-plus'
import { ref } from 'vue'
import { defineEmits } from 'vue'
const emit = defineEmits(['changeMap'])
const GISStore = useGISStore()
const activeName = ref('0')
const input = ref('')
const SearchPipeLine: any = ref([])
const SearchPipePoint: any = ref([])
const ChangePipePoint = (e: string) => {
  SearchPipePoint.value = GISStore.getPipePointByName(e)
}
//管线搜索
const ChangePipeLine = (e: string) => {
  SearchPipeLine.value = GISStore.getPipeLineByName(e)
}
//管线确定
const ChoosePipeLine = (Lon: number, Lat: number, Name: string, type: number, data: any) => {
  emit('changeMap', Lon, Lat, Name, type, data)
}
</script>
<style scoped lang="less">
:deep(.el-tab-pane) {
  ul {
    height: 150px;
    margin: 10px 0;
    overflow: hidden;
    overflow-y: scroll;
    li {
      padding: 5px;
    }
    li:hover {
      background: rgba(20, 161, 242, 0.05);
      cursor: pointer;
    }
  }
}
.select {
  background: #409eff !important;
  color: #fff !important;
}
.input-item {
  width: 50px;
  height: 50px;
  margin: 15px 0;
  background: #fff;
  border-radius: 5px;
  color: #666;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 13px;
  list-style: none;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  display: flex;
  // flex-wrap: wrap;
  align-items: center;
  font-style: normal;
  span {
    display: inline-block;
    // width: 15px;
    // height: 15px;
  }
}
.input-item:hover {
  background: #409eff;
  color: #fff;
}
</style>
